<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			输入第一个数字：<input type="text" v-model="value"/>
			输入第二个数字：<input type="text" v-model="value2"/>
			<p>计算第一个数字的平方{{square}}</p>
			<p>计算俩个数字的和{{sum}}</p>
		</div>
		<div id="app1">
			请输入1-10的数字，猜猜看一不一样：<input type="text" v-model="value" />
			<p>竞猜结果：{{mes}}</p>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:app,
				data:{
					value:2,//与输入的值双向绑定
					value2:3
				},
				computed:{ //computed用于有一个变量的值需要其他变量计算得到的时候
					 square:function(){ //与{{square}}的值双向绑定
					 	return this.value*this.value; 
					 },
					 sum:function(){
					 	return parseInt(this.value) +parseInt(this.value2);
					 }
				}
			});
			//computed与methods看起来一样，其实不一样！
			//在用methods的属性时需要加（）来引用 this.getnum(1,10);，而computed的不用加
			//methods是每次进入这个页面时都会执行一次，
			//而computed是将自身属性和引用的属性绑定，如mes与value，当输入的value变化是，mes发生相应的变化
			//所以，如需要在利用实时信息时，比如显示当前进入页面的时间，必须用methods方式
			var vm2 = new Vue({
				el:app1,
				data:{
					value:null,
					random:'',
				},
				methods:{
					getnum:function(min,max){
						return Math.floor(Math.random() * (max - min + 1)) + min;
					}
				},
				computed:{
					mes:function(){
						var temp=this.random;
						if (this.value==temp) {
							this.random = this.getnum(1,10);
							return '厉害了，竟然知道数字是：'+temp;
							
						} else{
							this.random = this.getnum(1,10);
							return '不知道了吧，我悄悄告诉你吧~数字是：'+temp;
						}
					}
				}
			});
		</script>
		
	</body>
</html>
